<template>
    <div @click="onClick" class="ICON">
      <!-- ref:获取DOM 结构  通过  this.$refs.icon 获取 -->
      <div ref="icon" class="icons">
        <van-icon :name="icon" size="0.6rem" />
      </div>
      <div>{{title}}</div>
    </div>
</template>

<script>
export default {
  props: {
    icon: {
      default: "",
      type: String
    },
    title: {
      default: "添加标题",
      type: String
    },
    offset: {
      default: 10,
      type: Number
    }
  },
  mounted() {
    this.$refs.icon.style.marginBottom = this.offset + "px";
  },
  methods: {
    onClick() {
      this.$emit("onClick");
    }
  }
};
</script>

<style scoped>
.icons {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>